<template>
  <div class="sass-group padding-top">
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="depart_id"
      border
      align="center"
      :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
      :height="oHeight"
    >
      <el-table-column prop="depart_id" label="序号" align="center" width="180"></el-table-column>
      <el-table-column prop="depart_name" label="集团名称">
        <template slot-scope="scope">
          <div class="power_name_box">
            <el-tag effect="plain">{{scope.row.depart_name}}</el-tag>
            <div
              class="new_add_next"
              @click="addNext(scope.row.depart_id)"
              v-if="scope.row.depart_level == 1"
            >
              <span>+</span>
              <p>增加小组</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="store_count" align="center" label="经销商数量"></el-table-column>
      <el-table-column prop="admin_count" align="center" label="管理员人数"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="powerEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="powerDelete(scope.row.depart_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增小组" :visible.sync="dialogFormVisible" class="admin-control-edit">
      <el-form :model="form" label-position="left" :rules="rules" ref="ruleForm">
        <el-form-item label="品线名称" :label-width="formLabelWidth" prop="depart_name">
          <el-input v-model.trim="form.depart_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTeam">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑管理员" :visible.sync="showEdit" class="admin-control-edit">
      <el-form :model="formEdit" label-position="left" :rules="rules" ref="ruleForm1">
        <el-form-item label="集团名称" :label-width="formLabelWidth" prop="depart_name">
          <el-input v-model.trim="formEdit.depart_name" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="集团管理员" :label-width="formLabelWidth" prop="depart_id">
          <el-select v-model="formEdit.admin_id" clearable placeholder="请选择">
            <el-option
              v-for="item in groupList"
              :key="item.value"
              :label="item.admin_name"
              :value="item.admin_id"
            ></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="devManage">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { resize } from "@/common/js/height.js";

export default {
  name: "group",
  data() {
    return {
      oHeight: 800,
      tableData: [],
      dialogFormVisible: false,
      showEdit: false,
      rules: {
        depart_name: {
          required: true,
          message: "请输入集团名称",
          trigger: "blur"
        }
      },
      form: {
        depart_name: "",
        parent_id: ""
      },
      formEdit: {
        depart_name: "",
        depart_id: ""
      },
      groupList: [],
      formLabelWidth: "90px"
    };
  },
  props: ["changed"], //父子组件传值---新增管理员

  created() {
    this.getList();
    resize(this);
    this.$nextTick(function() {
      this.oHeight = this.oHeight - 20;
    });
  },
  methods: {
    // 获取集团数据
    getList() {
      this.$http
        .post("/admin/depart/index.php?act=departManage&op=departList", {
          need_store: 0 //是否可以查看店铺 1 可以 0 不可以
        })
        .then(res => {
          if (res.code == 1) {
            this.tableData = res.data;
          }
        });
    },
    // 编辑
    powerEdit(row) {
      if (row.depart_level == "1") {
        this.formEdit.depart_name = row.depart_name;
        this.formEdit.depart_id = row.depart_id;
        this.groupList = [];
        this.showEdit = true;
        this.$http
          .post("/admin/depart/index.php?act=departManage&op=adminList", {
            depart_id: row.depart_id
          })
          .then(res => {
            if (res.code == "1") {
              this.groupList = res.data.list;
            }
          });
      } else {
        this.$store.commit("SET_VALUE", {
          name: row.depart_name,
          id: row.depart_id,
          parent: row.parent_id
        });
        this.$router.push({
          path: "couple-edit"
        });
      }
    },
    // 删除
    powerDelete(id) {
      this.$confirm("确认删除？")
        .then(_ => {
          this.$http
            .post("/admin/depart/index.php?act=departManage&op=delGroup", {
              depart_id: id
            })
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
                this.getList();
              },
              err => {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            );
          done();
        })
        .catch(_ => {});
    },
    // 点击增加小组
    addNext(id) {
      this.dialogFormVisible = true;
      this.form.depart_name = "";
      this.form.parent_id = id;
    },
    // 给集团分配管理员
    devManage() {
      this.$http
        .post(
          "/admin/depart/index.php?act=departManage&op=addDepart",
          this.formEdit
        )
        .then(res => {
          if (res.code == "1") {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
            this.getList();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
          this.showEdit = false;
          this.$refs["ruleForm1"].resetFields();
        });
    },
    // 增加小组
    addTeam() {
      this.$http
        .post("/admin/depart/index.php?act=departManage&op=addGroup", this.form)
        .then(res => {
          if (res.code == "1") {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
            this.getList();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
          this.dialogFormVisible = false;
          this.$refs["ruleForm"].resetFields();
        });
    }
  },
  watch: {
    changed(n, o) {
      this.getList();
    },
    dialogFormVisible(n, o) {
      if (!n) {
        this.$refs.ruleForm.resetFields();
      }
    },
    showEdit(n, o) {
      if (!n) {
        this.$refs.ruleForm1.resetFields();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.el-input,
.el-select {
  width: 60%;
}
/deep/table {
  width: auto !important;
  min-width: 100%;
}
.el-table {
  border: 1px solid #ebeef5;
}
.el-table.active {
  border-width: 1px;
}
/deep/.input_box_sort .el-input__inner {
  width: 60px;
  height: 30px;
  text-align: center;
  box-sizing: border-box;
  // padding: 0;
}
/deep/.input_box_name .el-input__inner {
  width: 100px;
  height: 30px;
  text-align: center;
}
/deep/.row-expand-cover .el-table__expand-icon {
  visibility: hidden;
}
.power_name_box {
  display: flex;
  align-items: center;
}
.power_name_box .input_box_name.el-input {
  width: auto;
}
.new_add_next {
  display: flex;
  align-items: center;
  margin-left: 20px;
  color: #19b0df;
  cursor: pointer;
}
.new_add_next > span {
  width: 22px;
  height: 22px;
  background: #19b0df;
  color: #fff;
  text-align: center;
  line-height: 19px;
  font-size: 22px;
  border-radius: 5px;
}
.new_add_next > p {
  margin-left: 10px;
}
</style>
